<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="400" style="border: 1px solid red"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      ctx.beginPath();
      ctx.moveTo(200, 0);
      ctx.lineTo(200, 200);
      ctx.strokeStyle = "lightblue";
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      ctx.moveTo(0, 75);
      ctx.lineTo(400, 75);
      ctx.strokeStyle = "lightblue";
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      // 斜体 字重 字号 字体簇
      ctx.font = "italic 700 32px Arial";
      ctx.fillStyle = "pink";
      ctx.fillText("hello, world!", 0, 75, 200);
      ctx.strokeStyle = "purple";
      ctx.strokeText("hello, world!", 0, 75, 200);

      // 垂直方向对齐方式
      ctx.font = "12px Arial";
      ctx.textBaseline = "top";
      ctx.fillText("top", 200, 75);

      ctx.font = "12px Arial";
      ctx.textBaseline = "hanging";
      ctx.fillText("hanging", 220, 75);

      ctx.font = "12px Arial";
      ctx.textBaseline = "middle";
      ctx.fillText("middle", 265, 75);

      ctx.font = "12px Arial";
      ctx.textBaseline = "alphabetic";
      ctx.fillText("alphabetic", 305, 75);

      ctx.font = "12px Arial";
      ctx.textBaseline = "ideographic";
      ctx.fillText("ideographic", 370, 75);

      ctx.font = "12px Arial";
      ctx.textBaseline = "bottom";
      ctx.fillText("bottom", 200, 75);
    </script>
  </body>
</html>
